<template>
    <div>
        <r-search :searchForm="searchForm2" :searchHandle="searchHandle2" :searchData="searchData2" />
        <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
        <r-table :isSelection="true" :isPagination="true" :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" @refresh="init()"></r-table>
        <r-form :formRules="formRulesActive" :formHandle="formHandleActive" :formData="formDataActive" :formCols="formColsActive" ref="elFormActive" labelWidth="200px" dialogWidth="1000px" :isHandle="true" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            searchData: {
                name:'',
                equipmentNo:'',
                equipmentNo:'',
                merchantId:''
            },
            searchForm: [
                {
                    type: 'input',
                    prop: 'name',
                    placeholder: '设备名称',
                    width: 150
                },
                {
                    type: 'input',
                    prop: 'equipmentNo',
                    placeholder: '设备编号',
                    width: 150
                },
                // {
                //     type: 'select',
                //     prop: 'typeId',
                //     placeholder: '设备类型',
                //     width: 150,
                //     options: [
                //         {
                //             label: '单柜门',
                //             value: '1'
                //         },
                //         {
                //             label: '双柜门',
                //             value: '2',
                //         },
                //     ]
                // },
                // {
                //     type: 'select',
                //     prop: 'operatorId',
                //     placeholder: '所属运营商',
                //     width: 150,
                //     options: [
                //     ]
                // },
                {
                    type: 'select',
                    prop: 'merchantId',
                    placeholder: '所属商家',
                    width: 150,
                    options: [
                    ]
                },
            ],
            searchHandle: [
                {
                    label: '搜索',
                    type: 'success',
                    icon: 'el-icon-search',
                    handle: e => this.init(this.tp)
                },
                {
                    label: '重置',
                    icon: 'el-icon-refresh-right',
                    handle: e => this.searchFromReset()
                }
            ],
            searchData2: {
                typeId: '生鲜柜'
            },
            searchForm2: [
                {
                    type: 'select',
                    prop: 'typeId',
                    placeholder: '设备类型',
                    width: 150,
                    options: [
                        {
                            label: '生鲜柜',
                            value: '1'
                        },
                        {
                            label: '自提柜',
                            value: '2',
                        },
                        {
                            label: '组合柜',
                            value: '3',
                        },
                    ],
                    change: e => {
                        this.init(e)
                        this.tp = e
                    }
                },
            ],
            searchHandle2: [

            ],
            tableData: [
            ],
            tableCols: [
                {
                    label: '设备类型',
                    prop: 'typeId',
                    formatter: e => e.typeId == 1 ? '单柜门' : '双柜门'
                },
                {
                    label: '设备名称',
                    prop: 'name'
                },
                {
                    label: '设备编号',
                    prop: 'equipmentNo'
                },
                {
                    label: '所属运营商',
                    prop: 'operatorName',
                    // theme: e => e.opStatus == '冻结' ? 'danger' : 'primary',
                    // type: "tag",
                },
                {
                    label: '所属商家',
                    prop: 'merchantName'
                },
                {
                    label: '绑定时间',
                    prop: 'createdTime'
                },
                {
                    label: "操作",
                    type: "button",
                    btnList: [
                        {
                            label: '取消绑定',
                            type: 'danger',
                            icon: 'el-icon-circle-close',
                            isShow: e => e.equipmentNo ? true : false,
                            handle: (row) => this.elFormDetailActive(row)
                        },
                    ]
                },

            ],
            tablePage: { limit: 10, page: 1, total: 0 },
            //禁用恢复
            formDataActive: {
                // isActive: "",
            },
            formColsActive: [
                { label: "确定要取消绑定选定项目？", width: 350, prop: "isActive" },
                // { type: "input", label: "确认密码", placeholder: '请输入确认密码', width: 350, prop: "enterPassword" },
            ],
            formRulesActive: {},
            formHandleActive: [
                {
                    label: "取消",
                    handle: e => this.elFormVisibleActive(),
                },
                {
                    label: "确定",
                    type: "primary",
                    handle: e => this.elFormSubmit(),
                },

            ],


        };
    },
    components: {},
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init(e) {
            let param = { ...this.searchData, ...this.tablePage, opId: this.$route.query.id }
            if (e) {
                if (e == 1) {
                    let res = await this.api.opDevlist(param)
                    if (res) {
                        this.tableData = res.data.list
                        this.tablePage.total = res.data.total
                    }
                } else if (e == 2) {
                    let res = await this.api.opDevlist2(param)
                    if (res) {
                        this.tableData = res.data.list
                        this.tablePage.total = res.data.total
                    }
                } else if (e == 3) {
                    let res = await this.api.opDevlist3(param)
                    if (res) {
                        this.tableData = res.data.list
                        this.tablePage.total = res.data.total
                    }
                }
            } else {
                let res = await this.api.opDevlist(param)
                if (res) {
                    this.tableData = res.data.list
                    this.tablePage.total = res.data.total
                }
            }
            let operatorId = ''
            let resOpt = await this.api.getOperatorList({})
            if (resOpt) {
                operatorId = resOpt.data.operatorId
                this.searchForm[3].options = []
                for (let i = 0; i < resOpt.data.length; i++) {
                    this.searchForm[3].options.push({
                        label: resOpt.data[i].name,
                        value: resOpt.data[i].operatorId
                    })
                }
            }
            // let resAgent = await this.api.getAgentList({
            //     userId: operatorId
            // })
            let resMerchant = await this.api.getMerchantList({
                userId: operatorId
            })
            // if (resAgent) {
            //     this.searchForm[3].options = []
            //     // this.searchForm[2].options = resAgent.data
            //     for (let i = 0; i < resAgent.data.length; i++) {
            //         this.searchForm[3].options.push({
            //             label: resAgent.data[i].name,
            //             value: resAgent.data[i].agentId
            //         })
            //     }
            // }
            if (resMerchant) {
                this.searchForm[4].options = []
                for (let i = 0; i < resMerchant.data.length; i++) {
                    this.searchForm[4].options.push({
                        label: resMerchant.data[i].name,
                        value: resMerchant.data[i].merchantId
                    })
                }
            }

        },
        async elFormSubmit(e) {
            //查询
            console.log(this.tp);
            if (this.tp == 1) {
                let res = await this.api.unbindOp(this.formDataActive)
                if (res) {
                    this.init(this.tp)
                    this.elFormVisibleActive()
                }
            }
            if (this.tp == 2) {
                let res = await this.api.unbindOp2(this.formDataActive)
                if (res) {
                    this.init(this.tp)
                    this.elFormVisibleActive()
                }
            }
            if (this.tp == 3) {
                let res = await this.api.unbindOp3(this.formDataActive)
                if (res) {
                    this.init(this.tp)
                    this.elFormVisibleActive()
                }
            } else {
                let res = await this.api.unbindOp(this.formDataActive)
                if (res) {
                    this.init(this.tp)
                    this.elFormVisibleActive()
                }
            }
        },
        elFormDetailActive(row) {
            Object.keys(this.formDataActive).forEach(key => {
                this.formDataActive[key] = row[key]
            })
            // unbindOp
            this.formDataActive.id = row.id;
            console.log(this.formDataActive);
            this.elFormVisibleActive()
        },
        elFormVisibleActive(tit) {
            if (this.$refs.elFormActive.$refs.ruleFormActive) {
                this.$refs.elFormActive.$refs.ruleFormActive.resetFields()
                this.$data.formDataActive = this.$options.data.call(this).formDataActive;
            }
            this.$refs.elFormActive.dialogFormVisible = !this.$refs.elFormActive.dialogFormVisible
            this.$refs.elFormActive.dialogFormTitle = tit ? tit : this.formDataActive.id ? '编辑' : '新增'
            if (this.$refs.elFormActive.dialogFormVisible) {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve();
                    }, 2000)
                })
            }
        },
    }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
